const tbody = document.querySelector("tbody");
const addBtn = document.querySelector(".modal-dialog-centered");
const province = document.querySelector('[name="province"]');
const city = document.querySelector('[name="city"]');
const county = document.querySelector('[name="county"]');
const addForm=document.querySelector('.add-form')
const secondary=document.querySelector('.btn-secondary ') 
const addModalLabel=document.querySelector('#addModalLabel')
//渲染学生列表
async function getStudent() {
  const res = await axios({
    url: "/student/list",
  });
//   console.log(res);
  const data = res.data.data;
  const html = data.reduce((prve, item) => {
    const {
      id,
      name,
      sex,
      age,
      group,
      phone,
      salary,
      truesalary,
      province,
      city,
      county,
      user_id,
      jing,
      wei,
    } = item;
    return (
      prve +
      `
    <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm  update" data-id='${id}'>修改</button>
          <button type="button" class="btn btn-danger btn-sm del" data-id='${id}'>删除</button>
        </td>
      </tr>
    `
    );
  }, "");
  tbody.innerHTML = html;
}
  //渲染省份
async function getProvince() {
    const res=await axios({
        url:'/geo/province',
    })
    // console.log(res.data);
    const html=res.data.reduce((prve,item)=>prve+`<option  value="${item}">${item}</option>`,'<option  value="">--省--</option>')
    province.innerHTML=html
}
//渲染城市
async function getCity(pname) {
    const res=await axios({
        url:'/geo/city',
        params:{pname}
    })
    const html=res.data.reduce((prve,item)=>prve+`<option  value="${item}">${item}</option>`,'<option  value="">--市--</option>')
    city.innerHTML=html
    county.innerHTML=`<option selected value="">--县--</option>`
}
//渲染地区
async function getCounty(pname,cname) {
    const res=await axios({
        url:'/geo/county',
        params:{pname,cname}
    })
    const html=res.data.reduce((prve,item)=>prve+`<option  value="${item}">${item}</option>`,'<option selected value="">--县--</option>')
    county.innerHTML=html
}
function init() {
    getStudent();
    getProvince()
    province.addEventListener('change',async function(e){
        getCity(province.value)
    })
    city.addEventListener('change',async function(e){
        getCounty(province.value,city.value)
    })

}
init()
addBtn.addEventListener("click", function (e) {
    $("#addModal").modal("show");
    addModalLabel.innerHTML='录入新学员'
  });
addForm.addEventListener('submit',async function(e){
    e.preventDefault()
    const data=serialize(addForm,{hash:true,empty:true})
    let res
    if (addModalLabel.innerHTML=='录入新学员') {
        delete data.id
        res=await axios({
            url:'/student/add',
            method:'post',
            data
        })
    }else{
        res=await axios({
            url:'/student/update',
            method:'put',
            data
        })
    }
    if (res.data.code==0) {
        toastr.success('添加学员成功')
        $("#addModal").modal("hide")
        addForm.reset()
        getStudent()
    }
})
tbody.addEventListener('click', async function(e){
    const id=e.target.dataset.id
    if (e.target.classList.contains('update')) {
        $("#addModal").modal("show");
        addModalLabel.innerHTML='编辑学员信息'
        console.log(id);
        const res=await axios({
            url:'/student/one',
            params:{id}
        })
        const data = res.data.data;
        const nameList=addForm.querySelectorAll('[name]')
        await getCity(data.province)
        await getCounty(data.province,data.city)
        // console.log(nameList);
        nameList.forEach(ele => {
            if (ele.name!=='sex') {
                addForm.querySelector(`[name=${ele.name}]`).value=data[ele.name]
            }
            addForm.querySelector(`[name=sex][value=${data.sex}]`).checked = true;
        });
    }else if (e.target.classList.contains('del')) {
        const res=await axios({
            url:'/student/delete',
            method:'delete',
            params:{id}
        })
        if (res.data.code==0) {
            toastr.success(res.data.message)
            getStudent()
        }
    }
})
secondary.addEventListener('click',function(e){
    city.innerHTML=`<option selected value="">--市--</option>`
    county.innerHTML=`<option selected value="">--县--</option>`
})